<template>
    <div id="particles-js" class="fixed inset-0 -z-10"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 20,
                density: {
                    enable: true,
                    value_area: 350,
                },
            },
            color: {
                value: "#7d25f6",
            },
            shape: {
                type: "circle",
            },
            opacity: {
                value: 0.5,
                random: false,
            },
            size: {
                value: 3,
                random: true,
            },
            line_linked: {
                enable: true,
                distance: 150,
                color: "#1890ff",
                opacity: 0.5,
                width: 0.8,
            },
            move: {
                enable: true,
                speed: 2,
                direction: "none",
                random: false,
                straight: false,
                out_mode: "out",
                bounce: false,
            },
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: true,
                    mode: "grab",
                },
                onclick: {
                    enable: true,
                    mode: "push",
                },
                resize: true,
            },
        },
        retina_detect: true,
    });
});
</script>

<style>
#particles-js {
    width: 100%;
    height: 100%;
    background-color: transparent;
    pointer-events: none;
}
</style>
